<template>
    <div class="home-user-info-container">

    <el-dialog title="请选择企业类型" :visible.sync="open" width="50%" :showClose="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="170px">
        <el-card class="box-card" shadow="hover">
              <el-form-item label="企业类型" prop="roleIds">
                  <el-select v-model="form.roleIds" style="width:100%" placeholder="选择企业类型">
                    <el-option
                      v-for="dict in dict.type.biz_organization_role_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
              </el-form-item>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getHomeUserInfo } from "@/api/system/user";
import { getAuthRole, unPermissionAuthRole } from "@/api/system/user";

export default {
  name: "UserInfoDashboard",
  dicts: ['biz_organization_role_type'],
  data () {
    return {
      userInfo: {},
      open: false,
      form: {},  rules: {
        roleIds: [
          { required: true, message: '企业类型不能为空', trigger: 'blur' }
        ],
      },
      userId: null,
      roleIds: []
    };
  },
  created() {
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      getHomeUserInfo().then(response => {
        console.log('init',response.data);
        if(response.data.roleIds.length===0){
          this.open = true;
          this.userId = response.data.userId;
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const userId = this.userId;
          const roleIds = this.form.roleIds;
          console.log('submit', userId, roleIds)
          unPermissionAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
            this.$modal.msgSuccess("授权成功");
            this.open = false;
            location.reload(true);
          });
        }
      })
    },
  }
};
</script>
<style>
.home-user-info-container {
  padding: 10px 0;
}
.home-user-info-container .el-card__body {
  padding: 10px 10px 5px 10px;
}
.home-user-info-container .div-avatar {
  padding: 5px;
  text-align: center;
}
.home-user-info-container .home-user-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
}
.home-user-info-container .user-info-header {
  font-size: 16px;
  padding: 12px 0;
  color: #5a5e66;
}
.home-user-info-container .user-info-header a {
  color: #409eff;
  padding-left: 10px;
}
.home-user-info-container .user-info-detail {
  display: block;
  font-size: 12px;
  color: #6a6b6e;
}
.home-user-info-container .user-info-detail i {
  margin-right: 15px;
}
.home-user-info-container .user-info-detail i span {
  color: #909399;
  padding-left: 5px;
}
</style>
